<template>
  <div class="SongListBox">
    <ElTable
      :data="tableData"
      height="495"
      class="abc"
      style="width: 100%"
      @click="getIndex"
    >
      <ElTableColumn prop="index" label="#" width="180" data-index="index" />
      <ElTableColumn prop="song" label="歌曲" width="180" />
      <ElTableColumn prop="singer" label="歌手" />
      <ElTableColumn prop="album" label="专辑" />
      <ElTableColumn prop="time" label="时长" />
    </ElTable>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent } from "vue";

export default defineComponent({
  name: "SongList",
});
</script>
<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { ElTable, ElTableColumn } from "element-plus";
import dayjs from "dayjs";

const props = defineProps({
  PlayerList: {
    type: Array,
    default: [],
  },
});
const getIndex = (e) => {
  console.log(e);
};
onMounted(() => {});
// 计算属性
const tableData = computed({
  // 只读
  get() {
    return props.PlayerList.map((item, index) => ({
      index: index,
      song: item.al.name,
      singer: item.ar[0].name,
      album: item.name,
      time: dayjs(item.dt).format("mm-ss"),
    }));
  },
  // 可读可写
  set(Newval) {},
});
</script>
<style>
.SongListBox {
}
.el-table__body-wrapper {
  width: 920px !important;
}
</style>
